<template>
  <div>
    <div class="from">
      <div class="title">
       {{ $t('Image_pullImage')}}
      </div>
      <button @click="changeAddShow(0)" class="btn btn1" :class="addShow === 0 ? 'btnActive' : ''">{{ $t('Image_Simple') }}</button>
      <button @click="changeAddShow(1)" class="btn" :class="addShow === 1 ? 'btnActive' : ''">{{ $t('Image_Advanced') }}</button>
      <button @click="changeAddShow(2)" class="btn btn2" :class="addShow === 2 ? 'btnActive' : ''">{{ $t('Image_Search') }}</button>
      <div class="addbox" v-show="addShow === 0">
        <SimpleAdd @Success="fetchImageList"></SimpleAdd>
      </div>
      <div class="addbox" v-show="addShow === 1">
        <SeniorAdd @Success="fetchImageList"></SeniorAdd>
      </div>
      <div class="addbox" v-show="addShow === 2">
        <!-- <SeniorAdd @Success="fetchImageList"></SeniorAdd> -->
        <SerchImage @Success="fetchImageList"></SerchImage>
      </div>
    </div>
    <div class="tablebox">
      <ImageButton :checkImage="checkImage" @delsuccess="fetchImageList" @success="fetchImageList"></ImageButton>
      <SerchInput :serchdata="imageList" @serchActive="serchActive"></SerchInput>
      <ImageTable v-if="imageList" :imageList="AfterChangeData" @changecheck="changecheck"></ImageTable>
    </div>
    <div class="page" v-if="imageList">
      <div class="pagenum">
        <el-select v-model="pageNum" :placeholder="plsSelectActiveRange " style="width: 55px" size="mini">
          <el-option :label="item" :value="item" v-for="item in Math.ceil((serchList ? serchList.length : imageList.length)/pageSize)" :key="item"></el-option>
        </el-select>
        {{ $t('Page_Page') }}
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="serchList ? serchList.length : imageList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Select, Option, Input, Button, Popover, Table, TableColumn, Pagination } from 'element-ui'
import post from '@/utils/post'
import SeniorAdd from '@/components/Image/SeniorAdd'
import SimpleAdd from '@/components/Image/SimpleAdd'
import ImageTable from '@/components/Image/Table'
import ImageButton from '@/components/Image/ImageButton'
import SerchInput from '@/components/Image/SerchInput'
import SerchImage from '@/components/Image/SerchImage'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Button)
Vue.use(Popover)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)

export default {
  data () {
    return {
      addShow: 0, // 控制高级拉取还是简单拉取镜像
      imageList: null, // 请求的镜像数据
      checkImage: [], // 选择的镜像列表
      serchList: null, // 搜索匹配的数据列表
      pageNum: 1, // 当前页
      pageSize: 6, // 每页显示数量
      plsSelectActiveRange:'',
    }
  },
  mounted () {
    // 初始请求镜像列表
    this.fetchImageList()
  },
  computed: {
    // 返回当前页面显示的数据
    AfterChangeData () {
      let start = (this.pageNum - 1) * this.pageSize
      let end = this.pageNum * this.pageSize
      return (this.serchList ? this.serchList.slice(start, end) : this.imageList.slice(start, end))
    }
  },
  methods: {
    // 分页大小改变
    handleSizeChange (val) {
      this.pageSize = val
    },
    // 当前页数改变
    handleCurrentChange (val) {
      this.pageNum = val
    },
    // 显示高级添加还是简单添加
    changeAddShow (id) {
      this.addShow = id
    },
    // 处理选中容器
    changecheck (item) {
      this.checkImage = item
    },
    // 获取镜像列表
    fetchImageList () {
      const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/images/json?all=true"' // 查询
      post({ docker }, (res) => {
        // console.log(res)
        this.imageList = res
      }, this)
    },
    // 处理搜索穿回来的值
    serchActive (item) {
      this.serchList = item
    }
  },
  components: {
    SeniorAdd,
    SimpleAdd,
    ImageTable,
    ImageButton,
    SerchInput,
    SerchImage
  }
}
</script>

<style lang="scss" scoped>
.tablebox{
  margin-top: 30px;
}
.addbox{
  margin-top: 25px;
}
.btn{
  padding: 6px 15px;
  background: #067FB5;
  font-size: 12px;
  color: #fff;
}
.btnActive{
  background: #286090;
}
.btn1{
  border-radius: 5px 0px 0px 5px;
}
.btn2{
  border-radius: 0px 5px 5px 0px;
}
.page{
  margin-top: 30px;
  float: right;
  display: flex;
  line-height: 28px;
  margin-right: 80px;
  .pagenum{
    margin-right: 10px;
  }
}
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 0px 10px;
  margin: 10px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
</style>
